import { BrowserRouter, Routes, Route, Link, useNavigate, useSearchParams, useParams } from 'react-router-dom'

const Home = () => {
	const navigate = useNavigate()
	const [searchParams] = useSearchParams()

	return (
		<>
			<div>this is Home--{searchParams.get('id')}</div>
			<button onClick={() => navigate('/about/1000')}>跳转about</button>
		</>
	)
}
const About = () => {
	const navigate = useNavigate()
	const { id } = useParams()
	return (
		<>
			<div>this is About--{id}</div>
			<button onClick={() => navigate('/?id=100')}>跳转home</button>
		</>
	)
}

function App() {
	return (
		<>
			<BrowserRouter>
				<Link to="/">home</Link>|<Link to="/about">about</Link>
				<Routes>
					<Route path="/" element={<Home />}></Route>
					<Route path="/about/:id" element={<About />}></Route>
				</Routes>
			</BrowserRouter>
		</>
	)
}

export default App
